<template>
	<view class="container">
		<navBar>
			<template slot='center'>
				<view style="color: #fff;">
					登录
				</view>
			</template>
		</navBar>
		<view class="top">
			<image src="/static/images/logo.jpg" mode=""></image>
		</view>
		<view class="form">
			<uni-forms label-width='40' ref="form" :rules="rules" :modelValue="formData" validate-trigger="blur">
				<uni-forms-item label="账号" class="ipt" name="username">
					<uni-easyinput type="text" v-model="formData.username" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item label="密码" name="password">
					<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<button class="btn" @click="submitForm">登录</button>

	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import {
		loginApi
	} from '@/api/login.js'
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				rules: {
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入账号',

							},
							// {
							// 	pattern: '^(?:(?:\\+|00)86)?1(?:(?:3[\\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\\d{8}$',
							// 	errorMessage: '账号格式不正确',
							// }
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',

							},
							{
								minLength: 6,
								maxLength: 10,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					}
				}
			}
		},
		components: {
			navBar
		},
		methods: {
			submitForm() {
				this.$refs.form.validate().then(async res => {
					//验证成功后执行
					const {
						data: {
							data
						}
					} = await loginApi(this.formData)
					this.$store.commit('user/SET_USER_INFO', data)
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}).catch(err => {
					//验证失败后执行
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		font-size: 14px;

		.top {
			display: flex;
			justify-content: center;
			align-items: center;
			// margin-top: 200rpx;
			width: 690rpx;
			height: 300rpx;

			image {
				width: 300rpx;
				height: 300rpx;
				border-radius: 50%;
			}
		}

		.form {
			padding: 80rpx;
		}

		.btn {
			width: 600rpx;
			height: 80rpx;
			font-size: 16px;
			line-height: 80rpx;
			background-color: #39cccc;
			color: #fff;
			font-weight: 800;
			border-radius: 50rpx;
		}
	}
</style>